<template>
  <el-container>
    <el-header>电商运营管理系统</el-header>
    <el-container>
      <el-aside width="200px">
        <el-tree
          style="max-width: 600px"
          :data="menuData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const menuData = ref([]);

const defaultProps = {
  children: "children",
  label: "menuName",
};

const menuList = () => {
  axios.get("/api/system/getMenuTreeByUserId").then((res) => {
    if (res.data.code === 200) {
      menuData.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg || "查询失败");
    }
  });
};
menuList();

const router = useRouter();

const handleNodeClick = (data) => {
  let url = data.menuUrl;
  if (url) {
    router.push(url);
  }
};
</script>
